
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>订单管理</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap-switch.css">
  <link rel="stylesheet" type="text/css" href="css/pager.css">

  <script src="lib/jquery-1.7.2.min.js" type="text/javascript"></script>
  <script src="lib/bootstrap-switch.js"></script>
  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <script src="../static/js/bootstrap-paginator.js"></script>
  <script src="js/pager.js"></script>
  <!--      <script src="js/utils.js"></script>-->

  <script>
    // verifi_login();
    //分页条
    function pager(total,size){
      var paras = {
        limit:size,
        limits:[5,10,15],
        groups:3,
        count:total
      }
      $("#pager3").YlpPage(paras);
    }

    //发送请求 请求商品数据

    function get_users(currentPage, pageSize){
      let datas;
      $.ajax({
        url:"/cart/select/all",
        method:"GET",
        async:false,
        data:{
          currentPage,
          pageSize
        },
        success:(data,status)=>{

          datas = data;
        },
        error:()=>{
          console.log("商品数据请求失败!")
        }
      })
      return datas;
    }

    //渲染用户数据到表格
    function render_data(carts){
      //清除原本数据
      $("#order_list").empty();
      let carts1=Array.from(carts);

      //遍历用户数据将数据渲染到页面中
      //遍历商品数据将数据渲染到页面中
      carts1.map((cart) =>{
        $("#order_list").append("<tr><td id=\"orderid\">"+String(cart.id)+"</td><td>"+String(cart.uid)+"</td><td>"+String(cart.pid)+"</td><td>"+String(cart.quantity)+"</td><td><button id=\"update-btn\" type=\"button\" class=\"btn btn-info\" data-toggle=\"modal\"  onclick='edit1(this)' data-target=\"#updDialog\">修改</button><button id=\"delete-btn\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" onclick='edit2(this)'data-target=\"#deleteDialog\">删除</button>");

      })
    }
    //自动填充修改模态框数据
    function edit1(val){
      //这里就是val，别以为写错了，如果写成this会报错：Uncaught SyntaxError: Unexpected token 'this'，这是转过来的参数值的意思
      let value = $(val).parent().parent().find("td");
      $("#upd_oid").val(value.eq(0).text())
      $("#upd_uid").val(value.eq(1).text())
      $("#upd_pid").val(value.eq(2).text())
      $("#upd_pqu").val(value.eq(3).text())
    }

    function edit2(val){
      //这里就是val，别以为写错了，如果写成this会报错：Uncaught SyntaxError: Unexpected token 'this'，这是转过来的参数值的意思
      let value = $(val).parent().parent().find("td");
      $("#delete_oid").val(value.eq(0).text())
    }

    // 等待页面加载完成之后，向服务器请求所有用户数据
    $(function (){

      //初始化分页条
      let  data = get_users(1,5);
      //渲染用户数据到页面
      render_data(data.records);
      //获取数据的总数
      let total = data.total;
      //初始化分页栏
      pager(total,5);


      //给修改确定按钮绑定事件
      $("#upd_Btn").click(() =>{
        let id=$("#upd_oid").val();
        let uid = $("#upd_uid").val();
        let pid = $("#upd_pid").val();
        let quantity =$("#upd_pqu").val();
        console.log(id);

        $.ajax({
          url:"/cart/update",
          type:"POST",
          data:{
            id,
            uid,
            pid,
            quantity
          },
          success:(data,status)=>{
            render_data(data.records);
            console.log(data);
          },
          error:()=>{
            console.log("修改失败!");
          }
        })

      })

      //给筛选按钮绑定事件
      $("#queryBtn").click(()=>{
        let condition=$("#condition").val();
        // console.log(condition);
        if (condition === "all"){
          let  data = get_users(1,5);
          //渲染用户数据到页面
          render_data(data.records);

        }

        else if (condition === "order_uid"){
          let uid = $("#text").val();
          if (uid){
            $.ajax({
              url:"/cart/select/uid",
              method:"GET",
              data:{
                uid
              },
              success:(data,status)=>{
                render_data(data.records);
              },
              error:()=>{
                console.log("订单数据请求失败!")
              }
            })

          }
        }
        else if (condition === "order_pid"){
          let pid = $("#text").val();
          if (pid){
            $.ajax({
              url:"/cart/select/pid",
              method:"GET",
              data:{
                pid
              },
              success:(data,status)=>{
                render_data(data.records);
              },
              error:()=>{
                console.log("订单数据请求失败!")
              }
            })

          }
        }

      })

      //给删除确定按钮绑定事件
      $("#delete_Btn").click(()=>{
        let id = $("#delete_oid").val();
        console.log(id);
        $.ajax({
          url:"/cart/delete",
          method:"GET",
          data:{
            id
          },
          success:(data,status)=>{
            render_data(data.records);
            console.log(data);

          },
          error:()=>{
            console.log("删除失败!");
          }
        })

      })


    })
  </script>


</head>
<body>
<!--the top nav begin-->
<div class="navbar navbar-default" role="navigation">
  <div class="navbar-inner">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">茶韵商城后台系统</a>
    </div>
    <ul class="nav navbar-nav pull-right">
      <li id="fat-menu" class="dropdown">
        <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
          <span class="glyphicon glyphicon-user"></span> 用户名
          <span class="glyphicon glyphicon-chevron-down"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="updateadmin.html">我的账户</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="login.html">登出</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<!--the top nav end-->
<!--the sidebar nav begin -->
<div class="sidebar-nav">
  <a href="index.html" class="nav-header" ><span class="glyphicon glyphicon-home"></span> 管理中心 首页</a>

  <a href="category.html" class="nav-header"><span class="glyphicon glyphicon-hd-video"></span> 分类管理</a>

  <a href="product.html" class="nav-header"><span class="glyphicon glyphicon-eye-open"></span> 商品管理 </a>

  <a href="order.html" class="nav-header"><span class="glyphicon glyphicon-eye-open"></span> 订单管理 </a>

  <a href="userlist.html" class="nav-header"><span class="glyphicon glyphicon-eye-open"></span> 账户管理</a>

  <a id="outLink" href="login.html" class="nav-header" ><span class="glyphicon glyphicon-log-out"></span> 登出</a>
</div>
<!--the siderbar nav en-->

<div class="content">
  <div class="header">
    <!--page title begin-->

    <!--提示框-->
    <div id="ok" class="alert alert-success" style="position: fixed; z-index: 99; width: 80%; display: none;">
      操作成功！
    </div>

  </div>

  <div class="container">

    <!--the toolbar begin -->
    <div class="toolbar">
      <div class="row">
        <div class="col-xs-6">
          <form class="form-inline pull-right" id="device-search" role="form">

            <div class="form-group">查询条件:</div>
            <div class="form-group">
              <select class="form-control" id="condition">
                <option value="all">所有订单</option>
                <option value="order_uid">根据用户编号查询</option>
                <option value="order_pid">根据商品编号查询</option>
              </select>
            </div>

            <div class="form-group">
              <input id="text" type="text" class="form-control" placeholder="订单编号/用户编号/商品编号">
            </div>
            <button id="queryBtn" type="button" class="btn btn-default">筛选</button>
          </form>
        </div>
      </div>

    </div>


    <!--all user detail begin -->
    <div class="panel panel-default" id="all-device-detail">
      <div class="panel-heading">
        <h5>所有订单信息</h5>

      </div>
      <table class="table">
        <thead>
        <tr>
          <th>订单编号</th>
          <th>用户编号</th>
          <th>商品编号</th>
          <th>订单数量</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody id="order_list"></tbody>
        <tr>
        </tr>
      </table>
    </div>

    <!--分页控件-->
    <div style="margin: 40px 0;text-align: center">
      <div id="pager3"> </div>
    </div>
  </div>
  <!--the container end -->





  <!-- 修改 -->
  <div class="modal fade" id="updDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
       aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel1">修改订单信息</h4>
        </div>
        <div class="modal-body row">
          <form action="#" class="form-horizontal" id="add-user1" role="form" enctype="multipart/form-data"
                id="uploadForm2" method="post">

            <div class="form-group">
              <label for="upd_oid" class="col-xs-4 control-label">订单编号</label>
              <div class="col-xs-6">
                <input type="text" class="form-control" id="upd_oid" disabled="disabled">
              </div>
            </div>
            <div class="form-group">
              <label for="upd_uid" class="col-xs-4 control-label">用户编号</label>
              <div class="col-xs-6">

                <input type="text" class="form-control" id="upd_uid">
              </div>
            </div>

            <div class="form-group">
              <label for="upd_pid" class="col-xs-4 control-label">商品编号</label>
              <div class="col-xs-6">
                <input type="text" class="form-control" id="upd_pid">
              </div>
            </div>
            <div class="form-group">
              <label for="upd_pqu" class="col-xs-4 control-label">订单数量</label>
              <div class="col-xs-6">
                <input type="text" class="form-control" id="upd_pqu">
              </div>
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button id="upd_closeBtn" type="button" class="btn btn-default" data-dismiss="modal" onclick="location.reload()">关闭</button>
          <button id="upd_Btn" type="button" class="btn btn-primary">确定</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <!--  删除类别模块-->
  <div class="modal fade" id="deleteDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
       aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel2">确认删除订单的信息:</h4>
        </div>
        <div class="modal-body row">
          <form action="#" class="form-horizontal" id="delete_orders" role="form" enctype="multipart/form-data"
                id="uploadForm3" method="post">
            <div class="form-group">
              <label for="delete_oid" class="col-xs-4 control-label">订单编号</label>
              <div class="col-xs-6">
                <input type="text" class="form-control" id="delete_oid" disabled="disabled">
              </div>
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button id="delete_closeBtn" type="button" class="btn btn-default" data-dismiss="modal" onclick="location.reload()">关闭</button>
          <button id="delete_Btn" type="button" class="btn btn-primary">确定</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

</div>
<!--the content end -->
<script src="lib/bootstrap/js/bootstrap.js"></script>

<!--全选按钮实现-->
<script>


  $(function () {
    $("#all").click(function () {
      var checked_status = this.checked;
      $("input[name=device-permission]").each(function () {
        this.checked = checked_status;
      });
    });
  });
</script>
</body>
</html>
